智能验证集成方式

更新时间:

智能验证是阿里巴巴集团提供的一种验证码解决方案。对大部分正常用户来说,只需一次点击交互即可完成验证码操作。对于您的业务来说,智能验证采用先进的风险分析引擎,有效区分来自人类与机器人的访问行为并拦截机器风险,为您提供安全可靠的业务环境。

前端接入代码集成

在需要使用智能验证功能的Web前端页面中,需要对智能验证进行初始化。以下代码为智能验证功能的前端接入代码示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
</head>
<body>
<div id="sc"></div>
<script>
    // 实例化ic对象
    AWSC.use("ic", function (state, module) {
        // 初始化
        window.ic = module.init({
            // 应用类型标识。它和使用场景标识(scene字段)一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。
            appkey: "CF_APP_1",
            // 使用场景标识。它和应用类型标识(appkey字段)一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值,请务必正确填写。
            scene: "nvc_register",
            // 声明智能验证需要渲染的目标元素ID。
            renderTo: 'sc',
            // 验证通过时会触发该回调参数。您可以在该回调参数中将会话ID(sessionId)、签名串(sig)、请求唯一标识(token)字段记录下来,随业务请求一同发送至您的服务端调用验签。
            success: function (data) {
                window.console && console.log(data.sessionId)
                window.console && console.log(data.sig)
                window.console && console.log(data.token)
            },
            // 验证失败时触发该回调参数
            fail: function (failCode) {
                console.log(failCode)
            },
            // 验证码加载异常时触发该回调参数
            error: function (errorCode) {
                console.log(errorCode)
            }
        });
    })
</script>
</body>
</html>

初始化

  • 资源引入

    在Web页面中使用滑动验证功能,需要在前端页面代码中添加以下代码,引入所需的JS资源。<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>

  • 初始化代码说明

     // 实例化ic对象
        AWSC.use("ic", function (state, module) {
            var icOption = {} // 智能验证的初始化参数对象
            // 初始化 调用module.init对智能验证进行初始化
            window.ic = module.init(icOption);
        })
    说明

    初始化module.init完成后,会返回一个实例化的ic对象。示例代码中该实例化的ic对象存在window.ic变量中。

  • 初始化参数说明

    在前端代码实例化验证组件时提供了以下初始化参数,您可以根据业务需要在代码中调整这些参数。

    参数

    含义

    是否必填

    appkey

    应用类型标识。它和使用场景标识(scene字段)一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。

    scene

    使用场景标识。它和应用类型标识(appkey字段)一起决定了智能验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值,请务必正确填写。

    renderTo

    声明智能验证需要渲染的目标元素ID。

    width

    智能验证组件的宽度,默认值300px。强烈建议您将该宽度设置为不小于300px。

    language

    验证组件的语言,默认值为cn(中文)。

    upLang

    二次验证时,用于自定义文案。详细配置方法请参见自定义文案。

    height

    智能验证组件的高度,默认值42px。强烈建议您将该高度设置为不小于42px。

    default_txt

    智能验证组件初始状态文案。

    success_txt

    智能验证组件验证通过状态文案。

    fail_txt

    智能验证组件验证失败(拦截)状态文案。

    scanning_txt

    智能验证组件验证中状态文案。

    test

    测试字段,用于测试验证码的不同状态。

    success

    前端智能验证通过时会触发该回调函数。您可以在该回调参数中将请求标识会话ID(sessionid)、签名串(sig)字段记录下来,随业务请求一同发送至您的服务端调用验签。

    fail

    智能验证失败时会触发该回调函数。

    error

    智能验证出现错误时触发该回调函数。

测试

在将前端接入代码集成至Web页面后,建议您在正式上线前通过以下方法进行测试。

  1. 通过设定初始化参数test的值复现智能现验证各个状态工作机制

    您可以通过将test字段值设置为智能验证服务提供的不同内容,来测智能试验证各个状态的效果。通过配置前端页面初始化代码中的test字段来直接控制智能验证服务接口的返回结果(通过、拦截)。

    test字段值

    模拟效果

    module.TEST_PASS

    智能验证通过

    module.TEST_BLOCK

    智能验证未通过,直接拦截

    module.TEST_NC_PASS

    唤醒滑动验证,且滑动验证通过

    module.TEST_NC_BLOCK

    唤醒滑动验证,且滑动验证不通过

    说明
    • 前缀moduleAWSC.use返回的对象,示例代码中命名为module

    • 新版集成代码中token是自动生成的,无需用户自行指定token。如果您在正式上线或进行完整的功能性测试时未提前删除test配置项,会导致token异常,从而可能导致集成操作中某个环节出现异常,例如:验签失败等。

    通过这样的方式,您可以直观地观察验证码各个状态的交互、样式和流程。

    测试代码示例:

    AWSC.use("ic", function (state, module) {
      window.ic = module.init({
        ...
        ...
        // 该配置项为测试项 在仅用来测试验证码不同状态时使用。上线时请将其删除. 智能验证test配置项有4种不同的值对应不同的验证码状态,具体请参考文中参数定义说明部分。
        test: module.TEST_PASS, // 测试智能验证通过
        // test: module.TEST_BLOCK, // 测试智能验证失败
        // test: module.TEST_NC_PASS, // 唤醒滑动验证并验证通过
        // test: module.TEST_NC_BLOCK, // 唤醒滑动验证并验证失败
        ...
        ...
      });
    })
  2. 在正式上线前,建议您执行完整的功能性测试和兼容性测试。在测试过程中,请注意:

    • 确保测试过程中,使用阿里云验证码控制台中为您分配的appkey和scene值进行测试。

    • 对于Internet Explorer浏览器,验证组件最低支持至Internet Explorer 9,Internet Explorer 8及以下不支持。

    • 在完整的功能性测试时,若成功调用获取的token包含CF_APP_1的内容,请检查test配置项是否删除,避免导致完整功能性测试失败。

对生成的ic对象进一步操作说明

初始化module.init完成之后,我们会返回一个实例化的ic对象,示例代码中存在window.ic变量中。在该对象中我们提供例一些方法,您可以按需对返回的ic对象进行进一步的操作。调用方式为window.ic[方法名]

方法名

参数

作用

reset

任何时候调用此方法,可以将智能验证重置为初始状态(即等待交互状态)。